<template lang="pug">
    .shopCar
        header 购物车
        img(:src="empty" v-if="isEmpty")
        //已经加入购物车的商品
        transition-group(name="fade")
            .shopCar-commodity(v-for="(item,index) in postList" :key="index" v-if="postList[index]!==0")
                span.checked
                img(:src="buyImgUrl[index]")
                span.name {{buyName[index]}}
                .pay
                    //单价
                    .price 单价 $ {{buyPrice[index]}}
                    //总价
                    .item-total 总价 $ {{buyPrice[index]*postList[index]}}
                span.num
                    //减少
                    span.reduce -
                    .input {{postList[index]}}
                    span.plus +
                span.del(@click="del(index)") 删除
        //合计
        .total
            //结账
            span.pay-bill
                //全选
                span.all-select
                span 合计
                span.buy-bill $ {{buyBill}}
            span.pay-bill-button  结算
</template>

<script>
    import empty from '../assets/icon/shopCar/empty.jpg'

    export default {
        name: "shopCar",
        data() {
            return {
                empty: empty,
                list: [
                    {
                        name: "休息零食",
                        P: "P1",
                        cell: [
                            {
                                name: "夏威夷果",
                                pay: 20,
                                url: require('../../public/img/home/commodity/fruit1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/fruit1.png')},
                                    {url: require("../../public/img/home/commodity/fruit2.png")},
                                    {url: require("../../public/img/home/commodity/fruit3.png")},
                                ],
                                introduce: "夏威夷果含有丰富的钙，磷 ，铁，维生素B1、B2和人体必需的8种氨基酸。"
                            },
                            {
                                name: "好吃的糖果",
                                pay: 40,
                                url: require('../../public/img/home/commodity/sweets1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/sweets1.png')},
                                    {url: require("../../public/img/home/commodity/sweets2.png")},
                                ],
                                introduce: "糖果是糖果糕点的一种，指以糖类为主要成份的一种小吃。"
                            }
                        ]
                    },
                    {
                        name: "精品服饰",
                        P: "P2",
                        cell: [
                            {
                                name: "卡通T恤",
                                pay: 120,
                                url: require('../../public/img/home/commodity/Tshirt1.png'),
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/Tshirt1.png')},
                                    {url: require("../../public/img/home/commodity/Tshirt2.png")},
                                ],
                                introduce: ""
                            },
                            {
                                name: "直男衬衫",
                                pay: 140,
                                url: require('../../public/img/home/commodity/shirt1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/shirt1.png')},
                                    {url: require("../../public/img/home/commodity/shirt2.png")},
                                ],
                                introduce: ""
                            }
                        ]
                    },
                    {
                        name: "手机数码",
                        P: "P3",
                        cell: [
                            {
                                name: "笔记本电脑",
                                pay: 5020,
                                url: require('../../public/img/home/commodity/computer1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/computer1.png')},
                                    {url: require("../../public/img/home/commodity/computer2.png")},
                                ],
                                introduce: "笔记本电脑是一种小型、可方便携带的个人电脑。"
                            },
                            {
                                name: "炫酷耳机",
                                pay: 1140,
                                url: require('../../public/img/home/commodity/headset1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/headset1.png')},
                                    {url: require("../../public/img/home/commodity/headset2.png")},
                                ],
                                introduce: ""
                            }
                        ]
                    },
                    {
                        name: "户外运动",
                        P: "P4",
                        cell: [
                            {
                                name: "时尚运动鞋",
                                pay: 520,
                                url: require('../../public/img/home/commodity/shoe1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/shoe1.png')},
                                    {url: require("../../public/img/home/commodity/shoe2.png")},
                                    {url: require("../../public/img/home/commodity/shoe3.png")}
                                ],
                                introduce: ""
                            },
                            {
                                name: "斯伯丁篮球",
                                pay: 240,
                                url: require('../../public/img/home/commodity/basketball1.png'),
                                //用于详情页中的轮播图
                                imgDetail: [
                                    {url: require('../../public/img/home/commodity/basketball1.png')},
                                    {url: require("../../public/img/home/commodity/basketball2.png")}
                                ],
                                introduce: "不易漏气变形，不易开胶起皮，篮球制作工艺复杂严格，球体坚固耐用。"
                            }
                        ]
                    }
                ],
                postList: [],
                buyImgUrl: [],
                buyName: [],
                buyPrice: [],
                isBuyItem:[],
                buyBill: 0,
                type: 0,
                num: 0,
                isEmpty: true,
            }
        },
        mounted() {
            if (sessionStorage.getItem('change')) {
                //将postLite转换成 数字的数组
                this.changeList();
                // 判断是否显示购物车列表
                this.showItem();
                // 获取所有图片的url 并且排列成数组
                this.arrImgUrl();
            }
        },
        methods: {
            //将postLite转换成 数字的数组
            changeList() {
                this.postList = sessionStorage.getItem('change').split(',');
                let a = [];
                this.postList.forEach((item, index) => {
                    a.push(Number(item));
                });
                this.postList = a;
            },
            // 获取所有图片的url 并且排列成数组
            arrImgUrl() {
                this.list.forEach((item, index) => {
                    this.type = index;
                    item.cell.forEach((item, index) => {
                        this.num = index;
                        this.buyImgUrl.push(item.url);
                        this.buyName.push(item.name);
                        this.buyPrice.push(item.pay)
                    });
                });
            },
            // 判断购物车空空的img
            showEmpty() {
                // 有一个大于0就不show
                this.isEmpty = !this.postList.some((val) => {
                    // 大于0
                    return val > 0;
                });
            },
            //判断是否显示单个的商品
            showItem() {
                this.showEmpty();
            },
            // 删除
            del(index) {
                this.postList[index] = 0;
                sessionStorage.setItem('change', this.postList);
                location.reload();
            }
        },
    }
</script>

<style scoped lang="stylus">
    .fade-enter-active, .fade-leave-active
        transition: 1s

    .fade-enter, .fade-leave-to
        transform: translateX(-100%);
        opacity: .8;

    .shopCar
        width 100%;
        height: 100%
        header
            text-align left
            padding-left 0.2rem
            height 1rem
            line-height 1rem
            color white
            background-color dodgerblue
            font-size 0.4rem
        img
            width 100%
        .shopCar-commodity
            display flex
            justify-content space-between
            align-items center
            height 1.5rem
            border-bottom #ddd solid 0.02rem
            .checked
                margin-left: 0.5rem
                border 0.09rem dodgerblue solid
                width 0.3rem
                height 0.3rem
                display: inline-block
                border-radius 0.5rem
                vertical-align text-bottom
            img
                width: 1.1rem
                height 1.1rem
            .pay
                color red
            .num
                .reduce, .plus
                    display inline-block
                    width 0.5rem
                    height: 0.5rem
                    line-height: 0.5rem
                    background-color dodgerblue
                    color white
                    border-radius 50%
                .input
                    width 0.5rem
                    margin 0 0.26rem
                    display: inline-block
            .del
                background-color red
                color white
                height 1.5rem
                line-height 1.5rem
                display: inline-block
                width 1.3rem
                font-size 0.4rem
                &:active
                    background-color darkred
        .total
            border-top 0.026rem solid #ddd
            position fixed
            bottom 1.2rem
            width 100%
            height 1rem
            line-height 1rem
            display: flex
            justify-content space-between
            align-items center
            background-color white
            .pay-bill
                width 50%
                text-align left
                .all-select
                    margin-left: 0.5rem
                    border 0.09rem dodgerblue solid
                    width 0.3rem
                    height 0.3rem
                    display: inline-block
                    border-radius 0.5rem
                    vertical-align text-bottom
                span
                    font-size .4rem
                    margin-left 0.3rem
                .buy-bill
                    color red
            .pay-bill-button
                background-color red
                color: white
                width 40%
                height 1rem
                line-height 1rem
                &:active
                    background-color darkred
</style>
